<template>
	<div>
		<div class="nav">
			<div class="header">
				<div class="left iconfont icon-arrow-left-bold" @click="$router.push('/recommend'),play()"></div>
				<div class="center">
					用户中心
				</div>
			</div>
			<h2>个人信息</h2>
			<div class="mation">
				<div class="left">
					<img :src="listsname.avatarUrl" alt="" srcset="" />
					<div>头像</div>
				</div>
				<div class="rigth">
					<ul>
						<li>
							<label for="inputs">昵称</label>:
							<div class="con">{{ listsname.nickname }}</div>
						</li>
						<li>
							<label for="inputs">ID</label>:
							<div class="con">{{ listsname.userId }}</div>
						</li>

						<li>
							<label for="inputs">介绍</label>:
							<div class="con">
								<p>{{ listsname.signature }}</p>
								<div class="dispn">{{ num }}</div>
							</div>
						</li>
						<li class="radio">
							<label for="inputs">性别</label>: <input type="radio" checked />保密
							<input type="radio" /> 男 <input type="radio" /> 女
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="navdata">
			<h1>收藏列表</h1>
			<div class="ul">
				<ul>
					<li v-for="(item,index) in $store.state.playlista" :key="index">
						<div class="img">
							<img :src="item.url" alt="">
						</div>
						<div class="p">
							<p>id : {{item.id}}</p>
							<p>歌名 : {{item.name}}</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<style lang="less">
	.navdata{
		.ul{
			ul{
				li{
				display: flex;
				.img{
					width: 100px;
					height: 100px;
					img{
						width: 100%;
						height: 100%;
					}
				}
				.p{
					margin: 20px ;
					p{
						font-size: 20px;
					}
				}
			}
			}
		}
	}
</style>

<script>
import { getCaptchaVerify } from '../../api/base';
export default {
	data() {
		return {
			listsname: {},
			bernum: '',
		};
	},
	methods:{
		play(){
			this.$store.commit("playdata",false)
		}
	},
	computed: {
		num: function() {
			return this.bernum.length;
		},
	},
	created() {
		// let {phone , password} = this.$store.state.listsname
		getCaptchaVerify({ phone: '17718378745', password: 'yipeng188983787' }).then((data) => {
			// getCaptchaVerify({ 'phone':phone, 'password': password }).then((data) => {
			this.listsname = data.profile;
			this.bernum = data.profile.signature.split('');
		});
	},
};
</script>

<style lang="less" scoped>
.header {
	display: flex;
	color: #fff;
	text-align: center;
	font-weight: bold;
	background-color: rgba(#A4D3EE, 1);
	.left {
		flex: 0 0 0.8rem;
		font-size: 0.46875rem;
		line-height: 0.984375rem;
	}
	.center {
		flex: 1;
		line-height: 0.984375rem;
		font-size: 30px;
		letter-spacing: 5px;
		text-shadow: 2px 1px #000;
		flex-shrink: 3px;
	}
}
h2 {
	color: #A4D3EE;
	padding: 10px 10px;
	text-shadow: 1px 0.5px #000;
	text-indent: 10px;
	font-weight: bold;
	font-size: 30px;
	font-style: italic;
}
.mation {
	display: flex;
	width: 100%;
	margin: 20px 0 0 0;
	.left {
		flex: 0.38;
		text-align: center;
		img {
			width: 200px;
			height: 200px;
			border: 8px solid #A4D3EE;
			border-radius: 50%;
		}
		div {
			padding: 5px 10px;
			width: 100px;
			margin: 0 auto;
			height: 40px;
			line-height: 40px;
			border-radius: 50px;
			margin-top: 10px;
			border: 3px solid #A4D3EE;
			color: rgb(109, 158, 208);
			font-size: 25px;
			background-color: rgb(245, 242, 242);
			box-shadow: 1px 1px 1px #000;
			font-weight: bold;
			text-shadow: 2px 2px #fff;
		}
	}
	.rigth {
		flex: 0.58;
		li {
			display: flex;
			padding: 10px;
			// height: 50px;
			line-height: 50px;
			justify-content: space-between;
			font-size: 20px;
			font-weight: bold;
			label {
				display: inline-block;
				min-width: 50px;
				color: #A4D3EE;
				text-shadow: 1px 1px #444;
			}
			.con {
				flex: 0.96;
				background-color: rgba(#A4D3EE, 0.8);
				color: #333;
				text-indent: 5px;
				font-size: 18px;
				position: relative;
				border-radius: 5px;
				text-indent: 20px;
				text-shadow: 0.3px 0px #000;
				p {
					width: 90%;
					text-indent: 20px;
					margin: 0 auto;
					word-wrap: break-word;
				}
				.dispn {
					position: absolute;
					right: 5px;
					bottom: -10px;
				}
			}
			input {
				margin: 20px;
			}
		}
		.radio {
			color: #A4D3EE;
			text-shadow: 1px 1px #444;
		}
	}
}
</style>
